<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Metrics</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="An image generator with 20+ metrics about your GitHub account such as activity, community, repositories, coding habits, website performances, music played, starred topics, etc. that you can put on your profile or elsewhere !">
    <meta name="author" content="lowlighter">
    <meta property="og:image" content="/.opengraph.png">
    <link rel="icon" href="/.favicon.png">
    <link rel="stylesheet" href="/.css/style.vars.css?v=3.34">
    <link rel="stylesheet" href="/.css/style.css?v=3.34">
    <link rel="stylesheet" href="/insights/.statics/style.css?v=3.34">
  </head>
  <body>
    <!-- Vue app -->
    <main :class="[palette]">
      <template>

        <header v-if="!embed" :class="{beta}">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
          <a href="/">Metrics Insights {{ version }}</a>
          <div class="grow"></div>
          <a class="oauth-github" :href="`/.oauth?${params}`" v-if="oauth">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
            <template v-if="requests.login">
              Signed in as {{ requests.login }}
            </template>
            <template v-else>
              Sign in with GitHub
            </template>
          </a>
        </header>

        <div class="loading-bar" v-if="(progress > 0)&&(1 > progress)">
          <div :style="{width:`${progress*100}%`}"></div>
        </div>

        <section class="container center">
          <div class="search" v-if="searchable">
            <div class="about">
              <h2>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"></path></svg>
                Search a GitHub user
              </h2>
              <small :class="{'error-text':(!requests.rest.remaining)||(!requests.graphql.remaining)}">Remaining GitHub requests<span v-if="requests.login"> for {{ requests.login }}</span>: {{ requests.rest.remaining }} REST / {{ requests.graphql.remaining }} GraphQL / {{ requests.search.remaining }} search</small>
              <small>Send feedback on <a href="https://github.com/lowlighter/metrics/discussions/229" target="_blank">GitHub discussions</a>!</small>
            </div>
            <div class="inputs">
              <input type="text" v-model="user" @keyup.enter="search" :disabled="pending">
              <button @click="search" :disabled="pending">
                <template v-if="pending">
                  Searching<span class="loading"></span>
                </template>
                <template v-else>
                  Search user!
                </template>
              </button>
            </div>
            <div class="warning" v-if="(!requests.rest.remaining)||(!requests.graphql.remaining)">
              This web instance has run out of GitHub API requests.
              Please wait until {{ rlreset }} to generate metrics again.
            </div>
            <small class="info">
              Display rankings, highlights, contributions, repositories, user reactions, stars, commits history, used languages and recent activity from any user account!
            </small>
            <small class="info" v-if="metrics">
              Share this profile using <a :href="url">{{ url }}</a>
            </small>
          </div>
          <div v-else-if="(!metrics)&&(user)&&(!error)">
            <p>
              Generating insights for {{ user }}<span class="loading"></span>
            </p>
          </div>
          <div class="error" v-if="error">
            An error occurred while generating metrics :(<br>
            <small>{{ error.message }}</small>
          </div>
          <small class="warning" v-if="preview">
            Metrics insights are rendered by <a href="https://metrics.lecoq.io/">metrics.lecoq.io</a> in preview mode.<br>
            Any backend changes won't be reflected but client-side rendering can still be tested.
          </small>
        </section>

        <template v-if="metrics">

          <section class="container">
            <div class="warning" v-if="warnings.length">
              <div v-for="warning in warnings">⚠️ {{ warning.message }}</div>
            </div>
          </section>

          <section class="container">
            <a :href="`https://github.com/${user}`" class="user">
              <img :src="account.avatar">
              <div class="info">
                <div class="name">{{ account.name }}</div>
                <div class="login">{{ account.login }}</div>
              </div>
            </a>
          </section>

          <section class="container text-center" v-if="loaded.includes('introduction')">
            {{ introduction }}
          </section>

          <section class="container text-center" v-if="!loaded.includes('achievements')">
            <div class="loading">Fetching achievements</div>
          </section>
          <template v-else>

            <div class="rankeds">
              <div v-for="{icon, prefix, title, text, rank, progress, value, leaderboard = null} in ranked" class="ranked" :class="{[rank.charAt(0).toLocaleLowerCase()]:rank !== '$', secret:rank === '$'}">
                <div class="icon">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" height="44" width="44">
                    <defs>
                      <mask id="mask">
                        <circle class="gauge-base" r="25" cx="28" cy="28" fill="white"></circle>
                      </mask>
                    </defs>
                    <svg xmlns="http://www.w3.org/2000/svg" class="gauge">
                      <circle class="gauge-base" r="25" cx="28" cy="28"></circle>
                      <circle v-if="(progress)||(rank !== 'X')" class="gauge-arc" transform="rotate(-90 28 28)" r="25" cx="28" cy="28" :stroke-dasharray="`${progress*155} 155`"></circle>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" mask="url(#mask)" v-html="icon"></svg>
                  </svg>
                </div>
                <div class="info">
                  <div class="user-rank">{{ format("number", leaderboard.user) }}<sup>{{ {1:"st", 2:"nd", 3:"rd"}[leaderboard.user%10] ?? "th" }}</sup></div>
                  <div class="total-rank">/ {{ format("number", leaderboard.total, {notation:"compact", compactDisplay:"long"}) }} {{ leaderboard.type }}</div>
                  <div class="title">{{ prefix }} {{ prefix.length ? title.toLocaleLowerCase() : title }}</div>
                  <div class="text">{{ text }}</div>
                </div>
              </div>
            </div>

            <section class="container">
              <div class="achievements">
                <div v-for="{icon, prefix, title, text, rank, progress, value, leaderboard = null} in achievements" class="achievement" :class="{[rank.charAt(0).toLocaleLowerCase()]:rank !== '$', secret:rank === '$'}">
                  <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" height="44" width="44">
                      <defs>
                        <mask id="mask">
                          <circle class="gauge-base" r="25" cx="28" cy="28" fill="white"></circle>
                        </mask>
                      </defs>
                      <svg xmlns="http://www.w3.org/2000/svg" class="gauge">
                        <circle class="gauge-base" r="25" cx="28" cy="28"></circle>
                        <circle v-if="(progress)||(rank !== 'X')" class="gauge-arc" transform="rotate(-90 28 28)" r="25" cx="28" cy="28" :stroke-dasharray="`${progress*155} 155`"></circle>
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" mask="url(#mask)" v-html="icon"></svg>
                    </svg>
                  </div>
                  <div class="info">
                    <div class="title">{{ prefix }} {{ prefix.length ? title.toLocaleLowerCase() : title }}</div>
                    <div class="text">{{ text }}</div>
                  </div>
                </div>
              </div>
            </section>

          </template>

          <section class="container" v-if="(loaded.includes('sponsors'))&&(sponsors)&&(!sponsors.error)">
            <h2>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.565 20.565 0 008 13.393a20.561 20.561 0 003.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.75.75 0 01-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5zM8 14.25l-.345.666-.002-.001-.006-.003-.018-.01a7.643 7.643 0 01-.31-.17 22.075 22.075 0 01-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.08 22.08 0 01-3.744 2.584l-.018.01-.006.003h-.002L8 14.25zm0 0l.345.666a.752.752 0 01-.69 0L8 14.25z"></path></svg>
              Sponsor {{ user }}
            </h2>
            <div v-html="sponsors.about" class="markdown"></div>
            <div class="goal" v-if="(sponsors.goal)||((sponsors.list)&&(sponsors.list.length))">
              <template v-if="sponsors.goal">
                <p>{{ sponsors.goal.description }}</p>
                <div class="progress-wrap">
                  <div class="progress" :style="{width:`${sponsors.goal.progress}%`, backgroundColor:'#EC6CB9'}"></div>
                </div>
                <div class="objective">{{ sponsors.goal.title }}</div>
              </template>
              <template v-if="(sponsors.list)&&(sponsors.list.length)">
                <p>{{ sponsors.list.length }} sponsors are funding <b>{{ user }}</b>'s work:</p>
                <div class="sponsors-list">
                  <img v-for="{avatar, login} in sponsors.list" :src="avatar" :alt="login" :title="login" class="avatar">
                </div>
              </template>
            </div>
          </section>

          <section class="container" v-if="account.type === 'user'">
            <h2>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1 2.5A2.5 2.5 0 013.5 0h8.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0V1.5h-8a1 1 0 00-1 1v6.708A2.492 2.492 0 013.5 9h3.25a.75.75 0 010 1.5H3.5a1 1 0 100 2h5.75a.75.75 0 010 1.5H3.5A2.5 2.5 0 011 11.5v-9zm13.23 7.79a.75.75 0 001.06-1.06l-2.505-2.505a.75.75 0 00-1.06 0L9.22 9.229a.75.75 0 001.06 1.061l1.225-1.224v6.184a.75.75 0 001.5 0V9.066l1.224 1.224z"></path></svg>
              Notable contributions
            </h2>
            <div class="loading" v-if="!loaded.includes('notable')">Fetching data</div>
            <template v-else-if="contributions.length">
              <p>
                <b>{{ user }}</b> has contributed to {{ format("number", stats?.repositoriesContributedTo?.totalCount) }} repositor{{ format("plural", stats?.repositoriesContributedTo?.totalCount, {y:true}) }}.
              </p>
              <div class="contributions">
                <a v-for="{name, avatar} in contributions" class="contribution" :href="`https://github.com/${name}`">
                  <img :src="avatar" alt="">
                  @{{ name }}
                </a>
              </div>
            </template>
            <div v-else>
              No contributions to display
            </div>
          </section>

          <section class="container">
            <h2>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M0 2.75A2.75 2.75 0 012.75 0h10.5A2.75 2.75 0 0116 2.75v10.5A2.75 2.75 0 0113.25 16H2.75A2.75 2.75 0 010 13.25V2.75zM2.75 1.5c-.69 0-1.25.56-1.25 1.25v10.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25V2.75c0-.69-.56-1.25-1.25-1.25H2.75z"></path><path d="M8 4a.75.75 0 01.75.75V6.7l1.69-.975a.75.75 0 01.75 1.3L9.5 8l1.69.976a.75.75 0 01-.75 1.298L8.75 9.3v1.951a.75.75 0 01-1.5 0V9.299l-1.69.976a.75.75 0 01-.75-1.3L6.5 8l-1.69-.975a.75.75 0 01.75-1.3l1.69.976V4.75A.75.75 0 018 4z"></path></svg>
              Featured repositories
            </h2>
            <div class="loading" v-if="!loaded.includes('repositories')">Fetching data</div>
            <div v-else-if="repositories.length" class="repositories">
              <div class="repository" v-for="repository in repositories">
                <div class="field">
                  <svg v-if="repository.isFork" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path></svg>
                  <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path></svg>
                  <div class="name">
                    <span>{{ repository.nameWithOwner }}</span>
                    <span v-if="repository.created">created {{ repository.created }}</span>
                    <span v-if="repository.starredAt">starred on {{ format("date", repository.starredAt) }}</span>
                  </div>
                </div>
                <div class="field description">{{ repository.description }}</div>
                <div class="field infos">
                    <div class="language" v-if="repository.primaryLanguage">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path :fill="repository.primaryLanguage.color" fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
                      {{ repository.primaryLanguage.name }}
                    </div>
                    <div v-if="repository.licenseInfo">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8.75.75a.75.75 0 00-1.5 0V2h-.984c-.305 0-.604.08-.869.23l-1.288.737A.25.25 0 013.984 3H1.75a.75.75 0 000 1.5h.428L.066 9.192a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.514 3.514 0 00.686.45A4.492 4.492 0 003 11c.88 0 1.556-.22 2.023-.454a3.515 3.515 0 00.686-.45l.045-.04.016-.015.006-.006.002-.002.001-.002L5.25 9.5l.53.53a.75.75 0 00.154-.838L3.822 4.5h.162c.305 0 .604-.08.869-.23l1.289-.737a.25.25 0 01.124-.033h.984V13h-2.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-2.5V3.5h.984a.25.25 0 01.124.033l1.29.736c.264.152.563.231.868.231h.162l-2.112 4.692a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.517 3.517 0 00.686.45A4.492 4.492 0 0013 11c.88 0 1.556-.22 2.023-.454a3.512 3.512 0 00.686-.45l.045-.04.01-.01.006-.005.006-.006.002-.002.001-.002-.529-.531.53.53a.75.75 0 00.154-.838L13.823 4.5h.427a.75.75 0 000-1.5h-2.234a.25.25 0 01-.124-.033l-1.29-.736A1.75 1.75 0 009.735 2H8.75V.75zM1.695 9.227c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327l-1.305 2.9zm10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327l-1.305 2.9z"></path></svg>
                      {{ repository.licenseInfo.name ?? repository.licenseInfo.spdxId }}
                    </div>
                  <div>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path></svg>
                    {{ format("number", repository.stargazerCount) }}
                  </div>
                  <div>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path></svg>
                    {{ format("number", repository.forkCount) }}
                  </div>
                  <div>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path></svg>
                    {{ format("number", repository.issues.totalCount) }}
                  </div>
                  <div>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"></path></svg>
                    {{ format("number", repository.pullRequests.totalCount) }}
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              No featured repositories
            </div>
          </section>

          <section class="container" v-if="account.type === 'user'">
            <h2>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 2.75a.25.25 0 01.25-.25h8.5a.25.25 0 01.25.25v5.5a.25.25 0 01-.25.25h-3.5a.75.75 0 00-.53.22L3.5 11.44V9.25a.75.75 0 00-.75-.75h-1a.25.25 0 01-.25-.25v-5.5zM1.75 1A1.75 1.75 0 000 2.75v5.5C0 9.216.784 10 1.75 10H2v1.543a1.457 1.457 0 002.487 1.03L7.061 10h3.189A1.75 1.75 0 0012 8.25v-5.5A1.75 1.75 0 0010.25 1h-8.5zM14.5 4.75a.25.25 0 00-.25-.25h-.5a.75.75 0 110-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0114.25 12H14v1.543a1.457 1.457 0 01-2.487 1.03L9.22 12.28a.75.75 0 111.06-1.06l2.22 2.22v-2.19a.75.75 0 01.75-.75h1a.25.25 0 00.25-.25v-5.5z"></path></svg>
              Overall users reactions
            </h2>
            <div class="loading" v-if="!loaded.includes('reactions')">Fetching data</div>
            <template v-else-if="reactions">
              <p>
                <b>{{ user }}</b> has collected {{ format("number", reactions.total) }} reaction{{ format("plural", reactions.total) }} from other users over their last {{ format("number", reactions.comments) }} comment{{ format("plural", reactions.comments) }}.
              </p>
              <div class="reactions">
                <div v-for="({score, value}, reaction) in reactions.list">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" height="66" width="66" class="gauge">
                    <circle class="gauge-base" r="25" cx="28" cy="28"></circle>
                    <circle v-if="score" class="gauge-arc" transform="rotate(-90 28 28)" r="25" cx="28" cy="28" :stroke-dasharray="`${score*155} 155`"></circle>
                    <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">{{ {HEART:'❤️', THUMBS_UP:'👍', THUMBS_DOWN:'👎', LAUGH:'😄', CONFUSED:'😕', EYES:'👀', ROCKET:'🚀', HOORAY:'🎉'}[reaction] }}</text>
                  </svg>
                  <div class="text">{{ value }} time{{ format("plural", value) }}</div>
                  <div class="text">{{ (score*100).toFixed(2) }}<small>%</small></div>
                </div>
              </div>
            </template>
            <div v-else>
              No users reactions
            </div>
          </section>

          <section class="container" v-if="account.type === 'user'">
            <div class="topics">
              <h2>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M14.184 1.143a1.75 1.75 0 00-2.502-.57L.912 7.916a1.75 1.75 0 00-.53 2.32l.447.775a1.75 1.75 0 002.275.702l11.745-5.656a1.75 1.75 0 00.757-2.451l-1.422-2.464zm-1.657.669a.25.25 0 01.358.081l1.422 2.464a.25.25 0 01-.108.35l-2.016.97-1.505-2.605 1.85-1.26zM9.436 3.92l1.391 2.41-5.42 2.61-.942-1.63 4.97-3.39zM3.222 8.157l-1.466 1a.25.25 0 00-.075.33l.447.775a.25.25 0 00.325.1l1.598-.769-.83-1.436zm6.253 2.306a.75.75 0 00-.944-.252l-1.809.87a.75.75 0 00-.293.253L4.38 14.326a.75.75 0 101.238.848l1.881-2.75v2.826a.75.75 0 001.5 0v-2.826l1.881 2.75a.75.75 0 001.238-.848l-2.644-3.863z"></path></svg>
                Starred topics
              </h2>
              <div class="loading" v-if="!loaded.includes('topics')">Fetching data</div>
              <template v-else-if="topics.length">
                <p>
                  <b>{{ user }}</b> has starred {{ format("number", topics.length) }} topic{{ format("plural", topics.length) }}.
                </p>
                <div class="list">
                  <a v-for="{name, description, icon, url} of topics" class="topic" :title="description" :href="url">
                    <img v-if="icon" :src="icon" alt="">
                    {{ name }}
                  </a>
                </div>
              </template>
              <div v-else>
                No starred topics.
              </div>
            </div>
          </section>

          <section class="container">
            <div class="languages">
              <h2>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 2.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v8.5a.25.25 0 01-.25.25h-6.5a.75.75 0 00-.53.22L4.5 14.44v-2.19a.75.75 0 00-.75-.75h-2a.25.25 0 01-.25-.25v-8.5zM1.75 1A1.75 1.75 0 000 2.75v8.5C0 12.216.784 13 1.75 13H3v1.543a1.457 1.457 0 002.487 1.03L8.061 13h6.189A1.75 1.75 0 0016 11.25v-8.5A1.75 1.75 0 0014.25 1H1.75zm5.03 3.47a.75.75 0 010 1.06L5.31 7l1.47 1.47a.75.75 0 01-1.06 1.06l-2-2a.75.75 0 010-1.06l2-2a.75.75 0 011.06 0zm2.44 0a.75.75 0 000 1.06L10.69 7 9.22 8.47a.75.75 0 001.06 1.06l2-2a.75.75 0 000-1.06l-2-2a.75.75 0 00-1.06 0z"></path></svg>
                Used languages
              </h2>
              <div class="loading" v-if="!loaded.includes('languages')">Fetching data</div>
              <template v-else-if="languages.length">
                <p>
                  <b>{{ user }}</b> has used {{ languages.length }} different language{{ format("plural", languages.length) }} for a total of {{ format("number", languages.total) }} byte{{ format("plural", languages.total) }}.
                  <small class="footnote">
                    Note that these numbers are based on results produced by <a href="https://github.com/Nixinova/LinguistJS">LinguistJS</a> from repositories owned by <b>{{ user }}</b> and may not be entirely accurate.
                  </small>
                </p>
                <div class="list">
                  <div class="language" v-for="{name, value, color, size} of languages">
                    <div class="progress" :style="{width:`${100*value}%`, backgroundColor:color}"></div>
                    <div :style="{color}">
                      <span class="name">{{ name }}</span>
                      <span class="percent">({{ format("number", value, {style:"percent", maximumFractionDigits:2})}})</span>
                    </div>
                    <div class="size">{{ format("number", size) }} byte{{ format("plural", size) }}</div>
                  </div>
                </div>
              </template>
              <div v-else>
                No languages used
              </div>
            </div>
          </section>

          <section class="container" v-if="account.type === 'user'">
            <div class="isocalendar">
              <h2>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4.75 0a.75.75 0 01.75.75V2h5V.75a.75.75 0 011.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 16H2.75A1.75 1.75 0 011 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 014.75 0zm0 3.5h8.5a.25.25 0 01.25.25V6h-11V3.75a.25.25 0 01.25-.25h2zm-2.25 4v6.75c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V7.5h-11z"></path></svg>
                Commits history
              </h2>
              <div class="loading" v-if="!loaded.includes('isocalendar')">Fetching isometric calendar</div>
              <div class="svg" v-else v-html="isocalendar"></div>
            </div>
            <div class="loading" v-if="!loaded.includes('calendar')">Fetching data</div>
            <template v-else-if="(calendar)&&(calendar.years?.length > 1)">
              <p>
                Below is the full commit history of <b>{{ user }}</b> between {{ calendar.years[calendar.years.length-1].year }} and {{ calendar.years[0].year }}.
                <small class="footnote">
                  Note that commits prior <b>{{ user }}</b>'s registration date on GitHub are not displayed.
                </small>
              </p>
              <div v-for="[r, {year, weeks}] of Object.entries(calendar.years)">
                <svg class="calendar" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0,0 795,108">
                  <g v-for="[x, week] of Object.entries(weeks)" :transform="`translate(${x*15}, 0)`">
                    <rect v-for="[y, {date, contributionCount, color}] of Object.entries(week.contributionDays)" class="day" x="0" :y="4 + (x == 0)*(7-week.contributionDays.length)*15 + y*15" width="11" height="11" :fill="calendar.color(color)" rx="2" ry="2">
                      <title>{{ date }}: {{ contributionCount }} commit{{ format("plural", contributionCount) }}</title>
                    </rect>
                  </g>
                </svg>
              </div>
            </template>
          </section>

          <section class="container">
            <h2>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 0110.65-5.003.75.75 0 00.959-1.153 8 8 0 102.592 8.33.75.75 0 10-1.444-.407A6.5 6.5 0 011.5 8zM8 12a1 1 0 100-2 1 1 0 000 2zm0-8a.75.75 0 01.75.75v3.5a.75.75 0 11-1.5 0v-3.5A.75.75 0 018 4zm4.78 4.28l3-3a.75.75 0 00-1.06-1.06l-2.47 2.47-.97-.97a.749.749 0 10-1.06 1.06l1.5 1.5a.75.75 0 001.06 0z"></path></svg>
              Overall status of related issues and pull requests
            </h2>
            <div class="loading" v-if="!loaded.includes('followup')">Fetching data</div>
            <div v-else-if="followup" class="followup">
              <template v-for="{type, section} in [{type:'repositories', section:followup}, {type:'user', section:followup.user||{}}]">
                <div class="followup-section" v-if="section.issues">
                  <h3>Issues {{ {repositories:`opened on ${account.login}'${[...account.login].pop() === "s" ? "" : "s"} repositories`, user:`opened by ${account.login}`}[type] || "" }}</h3>
                  <div class="progress-bars">
                    <div class="progress" :style="{width:`${100*section.issues.open/section.issues.count}%`, backgroundColor:'#238636'}"></div>
                    <div class="progress" :style="{width:`${100*section.issues.closed/section.issues.count}%`, backgroundColor:'#8957e5'}"></div>
                  </div>
                  <div class="legend">
                    <div>
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="#238636" fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"></path></svg>
                      {{ section.issues.open }} open
                    </div>
                    <div>
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="#8957e5" d="M11.28 6.78a.75.75 0 00-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l3.5-3.5z"></path><path fill="#8957e5" fill-rule="evenodd" d="M16 8A8 8 0 110 8a8 8 0 0116 0zm-1.5 0a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z"></path></svg>
                      {{ section.issues.closed }} closed
                    </div>
                  </div>
                </div>
                <div class="followup-section" v-if="section.pr">
                  <h3>Pull requests {{ {repositories:`opened on ${account.login}'${[...account.login].pop() === "s" ? "" : "s"} repositories`, user:`opened by ${account.login}`}[type] || "" }}</h3>
                  <div class="progress-bars">
                    <div class="progress" :style="{width:`${100*section.pr.open/section.pr.count}%`, backgroundColor:'#238636'}"></div>
                    <div class="progress" :style="{width:`${100*section.pr.closed/section.pr.count}%`, backgroundColor:'#da3633'}"></div>
                    <div class="progress" :style="{width:`${100*section.pr.merged/section.pr.merged}%`, backgroundColor:'#8957e5'}"></div>
                  </div>
                  <div class="legend">
                    <div>
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="#238636" fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"></path></svg>
                      {{ section.pr.open }} open
                    </div>
                    <div>
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="#da3633" fill-rule="evenodd" d="M10.72 1.227a.75.75 0 011.06 0l.97.97.97-.97a.75.75 0 111.06 1.061l-.97.97.97.97a.75.75 0 01-1.06 1.06l-.97-.97-.97.97a.75.75 0 11-1.06-1.06l.97-.97-.97-.97a.75.75 0 010-1.06zM12.75 6.5a.75.75 0 00-.75.75v3.378a2.251 2.251 0 101.5 0V7.25a.75.75 0 00-.75-.75zm0 5.5a.75.75 0 100 1.5.75.75 0 000-1.5zM2.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.25 1a2.25 2.25 0 00-.75 4.372v5.256a2.251 2.251 0 101.5 0V5.372A2.25 2.25 0 003.25 1zm0 11a.75.75 0 100 1.5.75.75 0 000-1.5z"></path></svg>
                      {{ section.pr.closed }} closed
                    </div>
                    <div>
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="#8957e5" fill-rule="evenodd" d="M5 3.254V3.25v.005a.75.75 0 110-.005v.004zm.45 1.9a2.25 2.25 0 10-1.95.218v5.256a2.25 2.25 0 101.5 0V7.123A5.735 5.735 0 009.25 9h1.378a2.251 2.251 0 100-1.5H9.25a4.25 4.25 0 01-3.8-2.346zM12.75 9a.75.75 0 100-1.5.75.75 0 000 1.5zm-8.5 4.5a.75.75 0 100-1.5.75.75 0 000 1.5z"></path></svg>
                      {{ section.pr.merged }} merged
                    </div>
                  </div>
                </div>
              </template>
            </div>
            <div v-else>
              No available data
            </div>
          </section>

          <section class="container" v-if="account.type === 'user'">
            <h2>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path></svg>
              Recently starred repositories
            </h2>
            <div class="loading" v-if="!loaded.includes('stars')">Fetching data</div>
            <div v-else-if="stars.repositories.length" class="repositories">
              <div class="repository" v-for="repository in stars.repositories">
                <div class="field">
                  <svg v-if="repository.isFork" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path></svg>
                  <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path></svg>
                  <div class="name">
                    <span>{{ repository.nameWithOwner }}</span>
                    <span v-if="repository.created">created {{ repository.created }}</span>
                    <span v-if="repository.starredAt">starred on {{ format("date", repository.starredAt) }}</span>
                  </div>
                </div>
                <div class="field description">{{ repository.description }}</div>
                <div class="field infos">
                    <div class="language" v-if="repository.primaryLanguage">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path :fill="repository.primaryLanguage.color" fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
                      {{ repository.primaryLanguage.name }}
                    </div>
                    <div v-if="repository.licenseInfo">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8.75.75a.75.75 0 00-1.5 0V2h-.984c-.305 0-.604.08-.869.23l-1.288.737A.25.25 0 013.984 3H1.75a.75.75 0 000 1.5h.428L.066 9.192a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.514 3.514 0 00.686.45A4.492 4.492 0 003 11c.88 0 1.556-.22 2.023-.454a3.515 3.515 0 00.686-.45l.045-.04.016-.015.006-.006.002-.002.001-.002L5.25 9.5l.53.53a.75.75 0 00.154-.838L3.822 4.5h.162c.305 0 .604-.08.869-.23l1.289-.737a.25.25 0 01.124-.033h.984V13h-2.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-2.5V3.5h.984a.25.25 0 01.124.033l1.29.736c.264.152.563.231.868.231h.162l-2.112 4.692a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.517 3.517 0 00.686.45A4.492 4.492 0 0013 11c.88 0 1.556-.22 2.023-.454a3.512 3.512 0 00.686-.45l.045-.04.01-.01.006-.005.006-.006.002-.002.001-.002-.529-.531.53.53a.75.75 0 00.154-.838L13.823 4.5h.427a.75.75 0 000-1.5h-2.234a.25.25 0 01-.124-.033l-1.29-.736A1.75 1.75 0 009.735 2H8.75V.75zM1.695 9.227c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327l-1.305 2.9zm10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327l-1.305 2.9z"></path></svg>
                      {{ repository.licenseInfo.name ?? repository.licenseInfo.spdxId }}
                    </div>
                  <div>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path></svg>
                    {{ format("number", repository.stargazerCount) }}
                  </div>
                  <div>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path></svg>
                    {{ format("number", repository.forkCount) }}
                  </div>
                  <div>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path></svg>
                    {{ format("number", repository.issues.totalCount) }}
                  </div>
                  <div>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"></path></svg>
                    {{ format("number", repository.pullRequests.totalCount) }}
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              No recently starred repositories
            </div>
          </section>

          <section class="container">
            <div class="activity">
              <h2>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0v5.25a.75.75 0 01-1.5 0V8a6.5 6.5 0 10-13 0v5.25a.75.75 0 01-1.5 0V8zm5.5 4.25a.75.75 0 01.75-.75h3.5a.75.75 0 010 1.5h-3.5a.75.75 0 01-.75-.75zM3 6.75C3 5.784 3.784 5 4.75 5h6.5c.966 0 1.75.784 1.75 1.75v1.5A1.75 1.75 0 0111.25 10h-6.5A1.75 1.75 0 013 8.25v-1.5zm1.47-.53a.75.75 0 011.06 0l.97.97.97-.97a.75.75 0 011.06 0l.97.97.97-.97a.75.75 0 111.06 1.06l-1.5 1.5a.75.75 0 01-1.06 0L8 7.81l-.97.97a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 010-1.06z"></path></svg>
                Recent activity
              </h2>
              <div class="loading" v-if="!loaded.includes('activity')">Fetching data</div>
              <ul v-else-if="activity.length">
                <li v-for="{actor, type, repo, timestamp, ...event} of activity">
                  <time :datetime="timestamp">{{ format("date", timestamp, {timeStyle:"short", dateStyle:"short", timeZone:config.timezone?.name}) }}</time>
                  <div class="actor" v-if="account.type === 'organization'">
                    <img :src="`https://github.com/${/\[bot\]$/.test(actor) ? 'actions' : actor }.png`">
                    <a :href="`https://github.com/${actor}`">{{ actor }}</a>
                  </div>
                  <div class="event">
                    <template v-if="type === 'comment'">
                      <svg v-if="event.on === 'pr'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 2.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v8.5a.25.25 0 01-.25.25h-6.5a.75.75 0 00-.53.22L4.5 14.44v-2.19a.75.75 0 00-.75-.75h-2a.25.25 0 01-.25-.25v-8.5zM1.75 1A1.75 1.75 0 000 2.75v8.5C0 12.216.784 13 1.75 13H3v1.543a1.457 1.457 0 002.487 1.03L8.061 13h6.189A1.75 1.75 0 0016 11.25v-8.5A1.75 1.75 0 0014.25 1H1.75zm5.03 3.47a.75.75 0 010 1.06L5.31 7l1.47 1.47a.75.75 0 01-1.06 1.06l-2-2a.75.75 0 010-1.06l2-2a.75.75 0 011.06 0zm2.44 0a.75.75 0 000 1.06L10.69 7 9.22 8.47a.75.75 0 001.06 1.06l2-2a.75.75 0 000-1.06l-2-2a.75.75 0 00-1.06 0z"></path></svg>
                      <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.75 2.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 01.75.75v2.19l2.72-2.72a.75.75 0 01.53-.22h4.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25H2.75zM1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0113.25 12H9.06l-2.573 2.573A1.457 1.457 0 014 13.543V12H2.75A1.75 1.75 0 011 10.25v-7.5z"></path></svg>
                      <div class="content">
                        Commented on <a :href="`https://github.com/${repo}/${{issue:'issues', pr:'pull', commit:'commit'}[event.on]}/${event.number}`">#{{ event.number }} {{ event.title }}</a> from <a :href="`https://github.com/${repo}`">{{ repo }}</a>
                        <quote v-if="event.content.trim().length" v-html="format('comment', event.content, {repo})" class="markdown"></quote>
                      </div>
                    </template>
                    <template v-if="type === 'member'">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"></path></svg>
                      <div class="content">Added <a :href="`https://github.com/${event.user}`"></a> as collaborator in <a :href="`https://github.com/${repo}`">{{ repo }}</a></div>
                    </template>
                    <template v-if="type === 'star'">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path></svg>
                      <div class="content">Starred <a :href="`https://github.com/${repo}`">{{ repo }}</a></div>
                    </template>
                    <template v-if="type === 'release'">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8.878.392a1.75 1.75 0 00-1.756 0l-5.25 3.045A1.75 1.75 0 001 4.951v6.098c0 .624.332 1.2.872 1.514l5.25 3.045a1.75 1.75 0 001.756 0l5.25-3.045c.54-.313.872-.89.872-1.514V4.951c0-.624-.332-1.2-.872-1.514L8.878.392zM7.875 1.69a.25.25 0 01.25 0l4.63 2.685L8 7.133 3.245 4.375l4.63-2.685zM2.5 5.677v5.372c0 .09.047.171.125.216l4.625 2.683V8.432L2.5 5.677zm6.25 8.271l4.625-2.683a.25.25 0 00.125-.216V5.677L8.75 8.432v5.516z"></path></svg>
                      <div class="content">
                        {{ event.draft ? "Drafted release" : event.prerelease ? "Pre-released" : "Released" }} of <a :href="`https://github.com/${repo}`">{{ repo }}</a>
                        <quote v-if="event.content.trim().length" v-html="event.content" class="markdown"></quote>
                      </div>
                    </template>
                    <template v-if="type === 'fork'">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path></svg>
                      <div class="content">Forked <a :href="`https://github.com/${repo}`">{{ repo }}</a></div>
                    </template>
                    <template v-if="type === 'push'">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z"></path></svg>
                      <div class="content">
                        Pushed {{ event.size }} commit{{ "s" }} in <a :href="`https://github.com/${repo}`">{{ repo }}</a> <template v-if="event.branch">on branch <code>{{ event.branch }}</code></template>
                        <ul>
                          <li v-for="commit of event.commits">
                            <a :href="`https://github.com/${repo}/commit/${commit.sha}`">#{{ commit.sha }}</a> {{ commit.message }}
                          </li>
                        </ul>
                      </div>
                    </template>
                    <template v-if="type === 'issue'">
                      <svg xmlns="http://www.w3.org/2000/svg" v-if="event.action === 'opened'" viewBox="0 0 16 16" width="16" height="16"><path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path></svg>
                      <svg xmlns="http://www.w3.org/2000/svg" v-else-if="event.action === 'closed'" viewBox="0 0 16 16" width="16" height="16"><path d="M11.28 6.78a.75.75 0 00-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l3.5-3.5z"></path><path fill-rule="evenodd" d="M16 8A8 8 0 110 8a8 8 0 0116 0zm-1.5 0a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z"></path></svg>
                      <svg xmlns="http://www.w3.org/2000/svg" v-else viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 1.5a6.491 6.491 0 00-5.285 2.715l1.358 1.358A.25.25 0 013.896 6H.25A.25.25 0 010 5.75V2.104a.25.25 0 01.427-.177l1.216 1.216a8 8 0 0114.315 4.03.748.748 0 01-.668.83.75.75 0 01-.824-.676A6.501 6.501 0 008 1.5zM.712 8.004a.75.75 0 01.822.67 6.501 6.501 0 0011.751 3.111l-1.358-1.358a.25.25 0 01.177-.427h3.646a.25.25 0 01.25.25v3.646a.25.25 0 01-.427.177l-1.216-1.216A8 8 0 01.042 8.827a.75.75 0 01.67-.823zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"></path></svg>
                      <div class="content">
                        {{ event.action === "opened" ? "Opened" : event.action === "reopened" ? "Reopened" : "Closed" }} <a :href="`https://github.com/${repo}/issues/${event.number}`">#{{ event.number }} {{ event.title }}</a> in <a :href="`https://github.com/${repo}`">{{ repo }}</a>
                        <quote v-if="event.content.trim().length" v-html="format('comment', event.content, {repo})" class="markdown"></quote>
                      </div>
                    </template>
                    <template v-if="type === 'pr'">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"></path></svg>
                      <div class="content">
                        {{ event.action === "opened" ? "Opened" : event.action === "merged" ? "Merged" : "Closed" }} <a :href="`https://github.com/${repo}/pull/${event.number}`">#{{ event.number }} {{ event.title }}</a> in <a :href="`https://github.com/${repo}`">{{ repo }}</a>
                        <quote v-if="event.content.trim().length" v-html="format('comment', event.content, {repo})" class="markdown"></quote>
                        <ul>
                          <li>
                            {{ event.files.changed }} file{{ "s" }} changed <code>++{{ event.lines.added }} --{{ event.lines.deleted }}</code>
                          </li>
                        </ul>
                      </div>
                    </template>
                    <template v-if="type === 'wiki'">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M0 1.75A.75.75 0 01.75 1h4.253c1.227 0 2.317.59 3 1.501A3.744 3.744 0 0111.006 1h4.245a.75.75 0 01.75.75v10.5a.75.75 0 01-.75.75h-4.507a2.25 2.25 0 00-1.591.659l-.622.621a.75.75 0 01-1.06 0l-.622-.621A2.25 2.25 0 005.258 13H.75a.75.75 0 01-.75-.75V1.75zm8.755 3a2.25 2.25 0 012.25-2.25H14.5v9h-3.757c-.71 0-1.4.201-1.992.572l.004-7.322zm-1.504 7.324l.004-5.073-.002-2.253A2.25 2.25 0 005.003 2.5H1.5v9h3.757a3.75 3.75 0 011.994.574z"></path></svg>
                      <div class="content">
                        Updated {{ event.pages.length }} wiki page{{ "s" }} in <a :href="`https://github.com/${repo}`">{{ repo }}</a>
                        <ul>
                          <li v-for="page of event.pages">
                            {{ page }}
                          </li>
                        </ul>
                      </div>
                    </template>
                    <template v-if="type === 'public'">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path></svg>
                      <div class="content">Made <a :href="`https://github.com/${repo}`">{{ repo }}</a> public</div>
                    </template>
                    <template v-if="type === 'review'">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.5 1.75a.25.25 0 01.25-.25h8.5a.25.25 0 01.25.25v7.736a.75.75 0 101.5 0V1.75A1.75 1.75 0 0011.25 0h-8.5A1.75 1.75 0 001 1.75v11.5c0 .966.784 1.75 1.75 1.75h3.17a.75.75 0 000-1.5H2.75a.25.25 0 01-.25-.25V1.75zM4.75 4a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5zM4 7.75A.75.75 0 014.75 7h2a.75.75 0 010 1.5h-2A.75.75 0 014 7.75zm11.774 3.537a.75.75 0 00-1.048-1.074L10.7 14.145 9.281 12.72a.75.75 0 00-1.062 1.058l1.943 1.95a.75.75 0 001.055.008l4.557-4.45z"></path></svg>
                      <div class="content">Reviewed <a :href="`https://github.com/${repo}/pull/${event.number}`">#{{ event.number }} {{ event.title }}</a> in <a :href="`https://github.com/${repo}`">{{ repo }}</a></div>
                    </template>
                    <template v-if="type === 'ref/create'">
                      <svg v-if="event.ref.type === 'branch'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122V6A2.5 2.5 0 0110 8.5H6a1 1 0 00-1 1v1.128a2.251 2.251 0 11-1.5 0V5.372a2.25 2.25 0 111.5 0v1.836A2.492 2.492 0 016 7h4a1 1 0 001-1v-.628A2.25 2.25 0 019.5 3.25zM4.25 12a.75.75 0 100 1.5.75.75 0 000-1.5zM3.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0z"></path></svg>
                      <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"></path></svg>
                      <div class="content">Created new {{ event.ref.type }} <code>{{ event.ref.name }}</code> in <a :href="`https://github.com/${repo}`">{{ repo }}</a></div>
                    </template>
                    <template v-if="type === 'ref/delete'">
                      <svg v-if="event.ref.type === 'branch'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122V6A2.5 2.5 0 0110 8.5H6a1 1 0 00-1 1v1.128a2.251 2.251 0 11-1.5 0V5.372a2.25 2.25 0 111.5 0v1.836A2.492 2.492 0 016 7h4a1 1 0 001-1v-.628A2.25 2.25 0 019.5 3.25zM4.25 12a.75.75 0 100 1.5.75.75 0 000-1.5zM3.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0z"></path></svg>
                      <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"></path></svg>
                      <div class="content">Deleted {{ event.ref.type }} <code>{{ event.ref.name }}</code> from <a :href="`https://github.com/${repo}`">{{ repo }}</a></div>
                    </template>
                    </div>
                </li>
              </ul>
              <div v-else>
                No recent activity
              </div>
            </div>
          </section>

        </template>

        <footer v-if="!embed">
          <a href="https://github.com/lowlighter/metrics">Repository</a>
          <a href="https://github.com/lowlighter/metrics/blob/master/LICENSE">License</a>
          <a href="https://github.com/marketplace/actions/metrics-embed">GitHub Action</a>
          <span v-if="hosted">Hosted with ❤️ by <a :href="hosted.link">{{ hosted.by }}</a></span>
        </footer>

      </template>
    </main>

    <!-- Scripts -->
    <script src="/.js/axios.min.js"></script>
    <script src="/.js/vue.min.js"></script>
    <script src="/insights/.statics/script.js?v=3.34"></script>
  </body>
</html>
